<!DOCTYPE html>
<html lang="zh-Hans">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">

    <link rel="stylesheet" href="./css/index.css" />
</head>

<body>

    <h1>CSS 关联</h1>

    <h2>内联样式</h2>
    在对应的标签中，添加style属性，并在属性值中，进行样式定义，具体代码如下：
    <pre>
&lt;h1 style=&quot;background-color: red;&quot;&gt;CSS 关联&lt;/h1&gt;
    </pre>


    <h2>内部样式表</h2>
    通过在head中，添加style标签，并进行内部样式定义，具体代码如下:
    <pre>
&lt;head&gt;
&lt;style type=&quot;text/css&quot;&gt;
    body {
        ...
    }
&lt;/style&gt;
&lt;/head&gt;
    </pre>

    <h2>外链样式</h2>
    通过在head中添加link标签，用于关联外链样式，具体代码如下:
    <pre>
&lt;head&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;./css/index.css&quot; /&gt;
&lt;/head&gt;
    </pre>


    <h2>参考链接</h2>
    <ul>
        <li><a target="_blank" href="https://www.w3school.com.cn/css/css_howto.asp">如何创建 CSS</a></li>
    </ul>
</body>

</html>